<template>
	<view>
		<view class="m-head">
			<u-navbar title="个人中心" back-icon-color="#000" title-color="#000" :title-bold="true" :immersive="false" :border-bottom="false" :background="{background:'none'}" ></u-navbar>
			<view class="m-user">
				<view class="m-user-image">
					<image v-if="userInfo.user_image" :src="userInfo.user_image" mode="aspectFill"></image>
					<image v-else src="@/static/center/center-logo.png" mode=""></image>
				</view>
				<view class="m-user-content">
					<view class="m-user-font1">
						<text>{{userInfo.real_name || userInfo.name || ''}}</text>
					</view>
					<view class="m-user-font2">
						<text>{{userInfo.username || ''}}</text>
					</view>
				</view>
				<!-- <view class="m-user-right" @click="to_link('/pages3/order/order')">
					<image src="../static/qcode.png" mode=""></image>
					<view class="">
						<text>订单核销</text>
					</view>
				</view> -->
			</view>
			<!-- <view class="m-head-bottom">
				<view class="m-head-font1">
					<text>我的佣金(元)</text>
				</view>
				<view class="m-head-font2">
					<text>{{userInfo.money || 0}}</text>
				</view>
			</view> -->
		</view>
		
		<view class="card">
			<view class="card-title">
				<text>员工中心</text>
			</view>
			<view class="card-list">
				<!-- <view class="card-item" @click="to_link('/pages3/fensi/fensi')">
					<image src="../static/center-icon1.png" mode=""></image>
					<view class="">
						<text>我的粉丝</text>
					</view>
				</view> -->
				<view class="card-item" @click="to_link('/pages3/sharecode/sharecode')">
					<image src="../static/center-icon2.png" mode=""></image>
					<view class="">
						<text>邀请码</text>
					</view>
				</view>
				<!-- <view class="card-item" @click="to_link('/pages3/yongjin/yongjin')">
					<image src="../static/center-icon3.png" mode=""></image>
					<view class="">
						<text>我的佣金</text>
					</view>
				</view> -->
				<view class="card-item" @click="to_link('/pages2/userinfo/userinfo')">
					<image src="../static/center-icon4.png" mode=""></image>
					<view class="">
						<text>个人信息</text>
					</view>
				</view>
				<!-- <view class="card-item" @click="to_link('/pages3/content/content?id=83')">
					<image src="../static/center-icon5.png" mode=""></image>
					<view class="">
						<text>分销说明</text>
					</view>
				</view>
				<button open-type="contact" class="card-item">
					<image src="../static/center-icon6.png" mode=""></image>
					<view class="">
						<text>联系客服</text>
					</view>
				</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {get_userInfo} from "@/common/function/api_fun.js"
	export default {
		data() {
			return {
				userInfo:{}
			}
		},
		onShow() {
			get_userInfo((data)=>{
				this.userInfo = data
			})
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
page{
	background: #f6f6f6;
}
.m-head{
	background: linear-gradient(45deg,#FFF3E6,#F4E1C3);
	.m-user{
		display: flex;
		align-items: center;
		padding: 80rpx 40rpx 60rpx;
		.m-user-image{
			width: 132rpx;
			height: 132rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
		.m-user-content{
			flex: 1;
			padding-left: 30rpx;
			.m-user-font1{
				font-size: 34rpx;
				color: #34302D;
				font-weight: 800;
				line-height: 48rpx;
			}
			.m-user-font2{
				font-size: 24rpx;
				color: #75706A;
				margin-top: 10rpx;
			}
		}
		.m-user-right{
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			font-size: 24rpx;
			color: #75706A;
			image{
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 10rpx;
			}
		}
	}
	.m-head-bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		width: 700rpx;
		height: 124rpx;
		margin-left: 25rpx;
		background: url("../static/head-bottom-bg.png");
		background-size: 100% 100%;
		.m-head-font1{
			font-size: 30rpx;
			color: #fff;
			font-weight: 600;
		}
		.m-head-font2{
			font-size: 48rpx;
			color: #fff;
		}
	}
}

.card{
	width: 700rpx;
	margin-left: 25rpx;
	margin-top: 40rpx;
	background: #fff;
	border-radius: 20rpx;
	.card-title{
		display: flex;
		align-items: center;
		font-size: 30rpx;
		color: #000;
		font-weight: 800;
		height: 106rpx;
		padding-left: 30rpx;
		border-bottom: 1px solid #EEEEEE;
	}
	.card-list{
		display: flex;
		flex-wrap: wrap;
		button{
			margin: 0;
			padding: 0;
			background: #fff;
			&::after{
				content: '';
				border: 0;
			}
		}
		.card-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 175rpx;
			height: 175rpx;
			font-size: 24rpx;
			color: #7D7D7D;
			line-height: 33rpx;
			image{
				width: 56rpx;
				height: 56rpx;
				margin-bottom: 20rpx;
			}
		}
	}
}
</style>
